<template>
  <!--  :src="isCollapse ? '../../assets/imgs/logo-s.png' : '../../assets/imgs/logo.png'" -->
  <div style="background-color: white; width: 100%; display: flex; justify-content: center">
    <img
      style="height: 48px"
      :src="isCollapse ? './src/assets/imgs/logo-s.png' : './src/assets/imgs/logo.png'"
      alt="12345"
      srcset=""
    />
  </div>

  <el-menu
    default-active="2"
    active-text-color="#ffd04b"
    background-color="#312e81"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <el-sub-menu
      :index="index"
      :key="key + index"
      v-for="(m, index) in menuStore.getChildren4me(1)"
    >
      <template #title>
        <!-- <el-icon><location /></el-icon> -->
        <!-- 动态图片技术 -->
        <el-icon>
          <component :is="getIcon(m.icon)" />
        </el-icon>
        <span>{{ m.title }}</span>
      </template>
      <el-menu-item
        v-for="(sm, index) in menuStore.getChildren4me(m.sysid)"
        :key="'sm' + index"
        :index="sm.path"
      >
        <el-icon>
          <component :is="getIcon(sm.icon)" />
        </el-icon>
        <span>{{ sm.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { Plus, Management, Setting, Van, Avatar } from '@element-plus/icons-vue'

import { useMenuStore } from '../../stores/menu'

import { storeToRefs } from 'pinia'

const menuStore = useMenuStore()

const { isCollapse } = storeToRefs(menuStore)

/**
 * 根据不同字符串，返回不同Icon组件
 * @param {string } icon
 */

const getIcon = (icon) => {
  switch (icon) {
    case 'Plus':
      return Plus
    case 'Management':
      return Management
    case 'Setting':
      return Setting
    case 'Van':
      return Van
    case 'Avatar':
      return Avatar
  }
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

menuStore.load4MeByLists()
</script>

<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
